<template>
  <el-drawer
    :title="title"
    :visible.sync="visible"
    :size="size"
    :before-close="handleClose" >
    <div class="drawer-content">
      <slot></slot>
      <div class="drawer-footer">
        <el-button @click="handleCancel" >{{ cancelText }}</el-button>
        <el-button type="primary" :loading="loading"  
            @click="handleConfirm" :disabled="loading"> {{ confirmText }} </el-button>
      </div>
    </div>
  </el-drawer>
</template>

<script>
export default {
  name: 'FormDrawer',
  props: {
    title: {
      type: String,
      default: ''
    },
    visible: {
      type: Boolean,
      default: false
    },
    size: {
      type: String,
      default: '70%'
    },
    loading: {
      type: Boolean,
      default: false
    },
    cancelText: {
      type: String,
      default: '取 消'
    },
    confirmText: {
      type: String,
      default: '确 定'
    }
  },
  methods: {
    handleClose(done) {
      this.$emit('update:visible', false)
      this.$emit('cancel')
      done()
    },
    handleCancel() {
      this.$emit('update:visible', false)
      this.$emit('cancel')
    },
    handleConfirm() {
      this.$emit('confirm')
    }
  }
}
</script>

<style scoped>
:deep(.el-drawer__header) {
  margin-bottom: 0;
  font-size: 16px;
  font-weight: bold;
}

.drawer-content {
  padding: 20px;
  height: 100%;
  overflow-y: auto;
  padding-bottom: 60px;
}

.drawer-footer {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 12px;
  background: #fff;
  border-top: 1px solid #e4e7ed;
  text-align: right;
}
</style> 